/*
 * @Author: quit
 * @Date: 2021-11-15 05:07:52
 * @LastEditTime: 2021-12-22 18:00:27
 * @Descripttion: Vue自定义指令
 */

/**
 * @description: 图片报错处理,将报错的图片设置为一个默认图片
 */
export const imagerror = {
  /**
   * @param {*} dom Dom实例
   * @param {*} options 指令的传入载荷
   */
  inserted(dom, options) {
    // 代理当前Dom的错误事件
    dom.onerror = function() {
      dom.src = options.value
    }
  }
}

/**
 * @description: 托转指令 - 待测试
 */
export const drag = {
  inserted(el, options) {
    let dragBox = el
    dragBox.onmousedown = e => {
      // 算出鼠标相对元素的位置
      let disX = e.clientX - dragBox.offsetLeft
      let disY = e.clientY - dragBox.offsetTop
      document.onmousemove = e => {
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX
        let top = e.clientY - disY
        // 移动当前元素
        dragBox.style.left = left + 'px'
        dragBox.style.top = top + 'px'
      }
      document.onmouseup = e => {
        // 鼠标弹起来的时候不再移动
        document.onmousemove = null
        // 预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
        document.onmouseup = null
      }
    }
  }
}
